<template>
  <div class="creative-center-container no-background-container">
    <el-row :gutter="50" style="margin-bottom: 20px;">
      <el-col :span="20">
        <el-button :type="step === 1 ? 'primary' : ''" @click="step=1">企业简介</el-button>
        <el-button :type="step === 2 ? 'primary' : ''" @click="step=2">主营业务</el-button>
        <el-button :type="step === 3 ? 'primary' : ''" @click="step=3">产品\服务提取</el-button>
        <el-button :type="step === 4 ? 'primary' : ''" @click="step=4">20+8行业分类</el-button>

      </el-col>
      <el-col :span="4">
        <!--        <el-button @click="handleDetail">企业详情</el-button>-->
        <!--        <el-button>配置详情</el-button>-->

      </el-col>
    </el-row>

    <el-row :gutter="20">

      <el-col :span="8" v-if="step==1">
        <vab-card style="height: 100%">
          <template #header>
            联网检索
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.online_query_company_overview"
              style="width: 100%"
              :rows="20"
              type="textarea"
              placeholder="请输入 联网检索 提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>
      <el-col :span="8" v-if="step==1">
        <vab-card style="height: 100%">
          <template #header>
            RAG检索
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.RAG_query_company_overview"
              style="width: 100%"
              :rows="20"
              type="textarea"
              placeholder="请输入RAG检索提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>

      <el-col :span="8" v-if="step==1">
        <vab-card style="height: 100%">
          <template #header>
            企业简介用户提示词
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.company_overview_user_prompt"
              style="width: 100%"
              :rows="20"
              type="textarea"
              placeholder="请输入企业简介用户提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>
      <el-col :span="8" v-if="step==2">
        <vab-card style="height: 100%">
          <template #header>
            联网检索
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.online_query_core_business"
              style="width: 100%"
              :rows="20"
              type="textarea"
              placeholder="请输入联网检索提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>


      <el-col :span="8" v-if="step==2">
        <vab-card style="height: 100%">
          <template #header>
            RAG检索
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.RAG_query_core_business"
              style="width: 100%"
              :rows="20"
              type="textarea"
              placeholder="请输入RAG检索提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>
      <el-col :span="8" v-if="step==2">
        <vab-card style="height: 100%">
          <template #header>
            主营业务用户提示词
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.core_business_user_prompt"
              style="width: 100%"
              :rows="20"
              type="textarea"
              placeholder="请输入主营业务用户提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>

      <el-col :span="24" v-if="step==3">
        <vab-card style="height: 100%">
          <template #header>
            系统提示词
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.product_sys_prompt"
              style="width: 100%"
              :rows="10"
              type="textarea"
              placeholder="请输入系统提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>


      <el-col :span="24" v-if="step==3">
        <vab-card style="height: 100%">
          <template #header>
            用户提示词
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.product_user_prompt"
              style="width: 100%"
              :rows="10"
              type="textarea"
              placeholder="请输入用户提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>


      <el-col :span="24" v-if="step==4">
        <vab-card style="height: 100%">
          <template #header>
            系统提示词
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.category_sys_prompt"
              style="width: 100%"
              :rows="10"
              type="textarea"
              placeholder="请输入系统提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>

      <el-col :span="24" v-if="step==4">
        <vab-card style="height: 100%">
          <template #header>
            用户提示词
          </template>
          <el-scrollbar style="height:100%">
            <el-input
              :disabled="isDisabled"
              v-model="queryForm.category_user_prompt"
              style="width: 100%"
              :rows="10"
              type="textarea"
              placeholder="请输入用户提示词"
            />
          </el-scrollbar>
        </vab-card>
      </el-col>
    </el-row>

    <el-row :gutter="50" style="text-align: center" v-if="!isDisabled">
      <el-col :span="24">
        <el-button type="primary" style="width:400px;margin-top:50px;text-align: center" @click="handleUpdate">提交
        </el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {ArrowRight, CaretBottom, CaretTop} from '@element-plus/icons-vue'
import {random} from 'lodash-es'
import landscape from '/@/assets/common_images/landscape.jpg'
import {getConfig, updateConfig} from '/@/api/company'

const route: any = useRoute()
const router = useRouter()

defineOptions({
  name: 'companySearch',
})

const step = ref(1)
const isDisabled = ref(false)

const queryForm = reactive<any>({
  product_user_prompt: '',
  product_sys_prompt: '',
  category_user_prompt: '',
  category_sys_prompt: '',
  online_query_company_overview: '',
  online_query_core_business: '',
  RAG_query_company_overview: '',
  RAG_query_core_business: '',
  core_business_user_prompt: '',
  company_overview_user_prompt: ''
});

onMounted(() => {
  getConfig().then(res => {
    if (res.code === 200 && res.data) {
      Object.keys(queryForm).forEach(key => {
        queryForm[key] = res.data[key] || queryForm[key];
      });
    } else {
      // 处理错误情况
      console.error('Failed to get config:', res);
    }
  }).catch(error => {
    // 处理接口请求错误
    console.error('Error fetching config:', error);
  });
});

const handleUpdate = () => {
  updateConfig(queryForm).then(res => {
    if (res.code === 200) {
      ElMessage.success('更新成功')
    } else {
      ElMessage.error('更新失败')
    }
  })
}

const handleDetail = (row: any) => {
  const id = route.query.id

  if (id)
    router.push({
      path: '/historySearch/companyDetail',
      query: {
        id: id,
        timestamp: Date.now(), //允许同一个详情页同时打开多次，否则会触发路由被缓存下次无法刷新的bug
      },
    })

}
</script>

<style lang="scss" scoped>
.creative-center-container {
  .item-content-wrap {
    display: flex;
    align-items: center;
    justify-items: center;

    :deep() {
      .el-image {
        width: 80px;
        margin-right: 15px;
        border-radius: var(--el-border-radius-base);
      }
    }
  }

  .el-statistic {
    --el-statistic-content-font-size: 28px;
  }

  .statistic-card {
    height: 100%;
    padding: var(--el-padding);
    background-color: var(--el-bg-color-overlay);
    border-radius: 4px;

    :deep() {
      .el-statistic__head {
        margin-bottom: var(--el-margin);

        [class*='ri'] {
          margin-top: -1.5px;
          margin-right: 3px;
        }

        .ri-user-heart-line {
          color: var(--el-color-danger);
        }

        .ri-contacts-book-2-line {
          color: var(--el-color-primary);
        }

        .ri-money-cny-circle-line {
          color: var(--el-color-warning);
        }
      }

      .el-statistic__head,
      .el-statistic__content {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }
    }

    .statistic-footer {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      margin-top: var(--el-margin);
      font-size: var(--el-font-size-small);
      color: var(--el-text-color-regular);

      .footer-item {
        display: flex;
        align-items: center;
        justify-content: center;

        span:last-child {
          display: inline-flex;
          align-items: center;
          margin-left: 4px;
        }
      }

      .green {
        color: var(--el-color-success);
      }

      .red {
        color: var(--el-color-error);
      }
    }
  }

  .vab-card {
    ul {
      padding: 0;
      margin: 0;
      line-height: 30px;
      list-style: none;

      span {
        color: var(--el-color-grey);
      }
    }

    :deep() {
      .el-card__header {
        .more {
          position: absolute;
          right: var(--el-margin);
          cursor: pointer;
        }
      }
    }
  }

  :deep() {
    .el-descriptions__body {
      background: none;
    }

    .el-carousel {
      margin-bottom: 20px;
      border-radius: var(--el-border-radius-base);

      &__item {
        .el-image {
          width: 100%;
          object-fit: fill;
        }
      }
    }
  }
}
</style>
